<template>
  <div class="trend_page_warp1">
    <img class="trend_header_img" src="../assets/images/home_header.png" alt="">
    <div class="trend_header_content">
      <div v-show="showBack" class="header_back_com" @click="backPage"><van-icon name="arrow-left" />返回</div>
      <div v-show="adsType==='0'" class="header_top_title">{{ selectAddress }}房价趋势报告(城市详情页面)</div>
      <div v-show="adsType==='1'" class="header_top_title">学校详情页面</div>
      <div v-show="adsType==='2'" class="header_top_title">小区详情页面</div>
      <div v-show="adsType==='3'" class="header_top_title">片区详情页面</div>
      <div v-show="adsType==='4'" class="header_top_title">行政区详情页面</div>
      <div v-show="!hasSubscribeWeekly" class="header_subscribe_btn" @click="subscribeWeekly">订阅该周报</div>
      <div v-show="hasSubscribeWeekly" class="header_subscribe_btn header_subscribe_btn2" @click="cancelSubscribeWeekly">取消订阅该周报</div>
      <div class="header_select_search_warp">
        <div class="header_select_address" @click="openSelectAds">
          <!--          <span >{{ selectAddressCity }}</span>-->
          <span>上海</span>
          <van-icon style="margin-left: 4px" name="arrow-down" />
        </div>
        <div class="header_search_input_warp">
          <van-icon name="search" @click="handleSearch" />
          <input v-model="inputSearchWord" class="header_search_input" type="text" placeholder="请输入行政区或者片区或者小区或者学校名称">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PageHeader',
  components: {},
  props: {
    selectAddress: {
      type: String,
      default: '上海',
    },
    selectAddressCity: {
      type: String,
      default: '上海',
    },
    showBack: {
      type: Boolean,
      default: false,
    },
    adsType: {
      type: String,
      default: '0',
    },
  },
  data() {
    return {
      inputSearchWord: '',
      hasSubscribeWeekly: false,
    }
  },
  computed: {},
  create() {
  },
  mounted() {
  },
  methods: {
    /** 点击返回 **/
    backPage() {
      this.$router.back(-1)
    },
    /** 打开地址选择页面 */
    openSelectAds() {
      this.$emit('openSelectAds')
    },
    /** 头部组件点击搜索图标 **/
    handleSearch() {
      if (this.inputSearchWord === '') {
        this.$toast('你还未输入内容')
      } else {
        this.$emit('handleSearch', this.inputSearchWord)
      }
    },
    /** 订阅周报 **/
    subscribeWeekly() {
      this.hasSubscribeWeekly = !this.hasSubscribeWeekly
    },
    cancelSubscribeWeekly() {
      this.hasSubscribeWeekly = !this.hasSubscribeWeekly
    },
  },
}
</script>

<style scoped lang="scss">
  @import "../assets/style/base";
  .trend_page_warp1 {
    position: relative;
    width: 100%;
    height: pxTorem(360px);

    .trend_header_img {
      width: 100%;
      height: pxTorem(360px);
    }

    .trend_header_content {
      position: absolute;
      top: 0;
      width: 100%;
      .header_back_com{
        font-size: pxTorem(30px);
        position: absolute;
        top: 0;
        left: 0;
        padding: pxTorem(15px) 0 pxTorem(15px) pxTorem(20px);
        display: flex;
        align-items: center;
      }
      .header_top_title {
        background-color: #1296db;
        margin: 0 auto pxTorem(20px) auto;
        padding: pxTorem(20px) 0;
        font-size: pxTorem(32px);
        color: #ffffff;
        text-align: center;
      }

      .header_subscribe_btn {
        background-color: #ff9900;
        width: pxTorem(240px);
        margin: pxTorem(20px) auto pxTorem(60px) auto;
        padding: pxTorem(14px) 0;
        border-radius: pxTorem(30px);
        font-size: pxTorem(24px);
        color: #ffffff;
        text-align: center;
      }
      .header_subscribe_btn2{
        color: #666666;
        background-color: #dcdcdc;
      }

      .header_select_search_warp {
        width: 96%;
        height: pxTorem(72px);
        margin: auto;
        display: flex;
        background-color: #ffffff;
        align-items: center;

        .header_select_address {
          border-right: 1px solid #999999;
          font-size: pxTorem(26px);
          padding: 0 pxTorem(16px);
          display: flex;
          align-items: center;
          height: 100%;
        }

        .header_search_input_warp {
          margin-left: pxTorem(24px);
          display: flex;
          align-items: center;

          .header_search_input {
            width: pxTorem(500px);
            margin-left: pxTorem(24px);
            border: none;
            outline: none;
            font-size: pxTorem(26px);
          }
        }
      }
    }
  }

</style>
